<template>
<div class="goodsinfo-container">

  <!-- 购物车小球动画 -->
  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <div class="ball" v-show="ballFlag" ref="ball"></div>
  </transition>
  <!-- 商品轮播图区域 -->
  <div class="mui-card">
    <div class="mui-card-content">
      <div class="mui-card-content-inner">
        <swiper :lunbotu-list="lunbotu" :isfull="false"></swiper>
      </div>
    </div>
  </div>
  <!-- 商品购买区域 -->
  <div class="mui-card">
    <div class="mui-card-header">{{ goodsinfo.title }}</div>
    <div class="mui-card-content">
      <div class="mui-card-content-inner">
        <p class="price">
          市场价：<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsinfo.sell_price }}</span>
        </p>
        <p>购买数量：
          <goodbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></goodbox>
        </p>
        <p>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
        </p>
        <!-- 分析： 如何实现加入购物车时候，拿到 选择的数量 -->
        <!-- 1. 经过分析发现： 按钮属于 goodsinfo 页面， 数字 属于 numberbox 组件 -->
        <!-- 2. 由于涉及到了父子组件的嵌套了，所以，无法直接在 goodsinfo 页面zhong 中获取到 选中的商品数量值-->
        <!-- 3. 怎么解决这个问题：涉及到了 子组件向父组件传值了（事件调用机制） -->
        <!-- 4. 事件调用的本质： 父向子传递方法，子调用这个方法， 同时把 数据当作参数 传递给这个方法 -->
      </div>
    </div>
  </div>
  <!-- 商品参数区域 -->
  <div class="mui-card">
    <div class="mui-card-header">商品参数</div>
    <div class="mui-card-content">
      <div class="mui-card-content-inner">
        <p>商品货号：{{goodsinfo.goods_no}}</p>
        <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
        <p>上架时间：{{goodsinfo.add_time | dateFormat}}</p>
      </div>
    </div>
    <div class="mui-card-footer">
      <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
      <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
    </div>
  </div>
</div>
</template>

           
<script>
import {
  getLunbotu,
  getGoodsInfo
} from '@/api/index.js'
// 导入swiper组件
import swiper from './swiper.vue'
import goodbox from './goodbox.vue'
export default {
  data() {
    return {
      id: this.$route.params.id, //将路由参数对象中的id挂载到data中
      lunbotu: [], //轮播图数据
      goodsinfo: {}, //商品信息
      ballFlag: false, //控制小球显示隐藏的标识符
      selectedCount: 1 // 保存用户选中的商品数量， 默认，认为用户买1
    }
  },
  created() {
    // 获取轮播图数据
    getLunbotu(this.id).then(res => {
        console.log(res)
        if (res.status === 0) {
          // 先循环轮播图数组的每一项 为item添加img属性 因为轮播图组件中 只认识item.img 不认识item.src
          res.message.forEach(item => {
            item.img = item.src
          })
          this.lunbotu = res.message
        }
      }),
      // 获取商品信息
      getGoodsInfo(this.id).then(res => {
        console.log(res.message)
        if (res.status === 0) {
          this.goodsinfo = res.message[0]
        }
      })
  },
  methods: {
    // 跳转商品图文介绍页
    goDesc(id) {
      this.$router.push({
        name: 'goodsdesc',
        params: {
          id
        }
      })
    },
    // 跳转评论页面
    goComment(id) {
      this.$router.push({
        name: 'goodscomment',
        params: {
          id
        }
      })
    },
    addToShopCar() {
      // 添加到购物车
      this.ballFlag = !this.ballFlag;
      // 存储想要购买的商品的信息
        var goodsinfo = {
        id: this.id,
        count: this.selectedCount,
        price: this.goodsinfo.sell_price,
        selected: true
      };
      // 调用 store 中的 mutations 来将商品加入购物车
      this.$store.commit("addToCar",goodsinfo)
    },
    // ###小球动画区
    // 入场动画初始状态设置
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    // 入场动画持续过程
    enter(el, done) {
      el.offsetWidth;
      // 获取小球在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 获取徽标在页面中的位置
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      // 距离相减
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;

      console.log(xDist,yDist);
      
      // 动画样式
      el.style.transform = `translate(${xDist}px,${yDist}px)`;
      el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
      done()
    },
    // 入场动画结束状态
    afterEnter(el) { 
      // 结束时改变小球状态
      this.ballFlag = !this.ballFlag;
      // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
      // 拼接出一个，要保存到 store 中 car 数组里的 商品信息对象
    
    },
    getSelectedCount(count) {
      // 当子组件把 选中的数量传递给父组件的时候，把选中的值保存到 data 上
      this.selectedCount = count;
      console.log("父组件拿到的数量值为： " + this.selectedCount);
    }
  },
  components: {
    swiper,
    goodbox
  }
}
</script>

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
}

.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 99;
  top: 390px;
  left: 146px;
}
</style>
